<template>
  <div class="register-container">
    <div class="register-background">
      <!-- 渐变遮罩层 -->
      <div class="background-overlay"></div>
      <div class="register-content">
        <div class="register-header">
          <div class="logo-section">
            <el-icon size="48" color="#2e7d32"><School /></el-icon>
            <h1>中山大学研究生院</h1>
            <p>校企对接平台 - 用户注册</p>
          </div>
        </div>

        <el-card class="register-card" shadow="never">
          <template #header>
            <div class="card-header">
              <h2>创建新账户</h2>
              <p>请填写以下信息完成注册</p>
            </div>
          </template>

          <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" size="large">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input
                    v-model="form.username"
                    placeholder="请输入用户名"
                    prefix-icon="User"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户角色" prop="role">
                  <el-select v-model="form.role" placeholder="请选择用户角色" style="width: 100%">
                    <el-option label="企业用户" value="enterprise">
                      <div class="role-option">
                        <el-icon color="#2e7d32"><OfficeBuilding /></el-icon>
                        <span>企业用户</span>
                      </div>
                    </el-option>
                    <el-option label="导师用户" value="mentor">
                      <div class="role-option">
                        <el-icon color="#4caf50"><User /></el-icon>
                        <span>导师用户</span>
                      </div>
                    </el-option>
                    <el-option label="学生用户" value="student">
                      <div class="role-option">
                        <el-icon color="#66bb6a"><User /></el-icon>
                        <span>学生用户</span>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input
                    v-model="form.realName"
                    placeholder="请输入真实姓名"
                    prefix-icon="User"
                    clearable
                    style="width: 230px;" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="form.phone"
                    placeholder="请输入手机号码"
                    prefix-icon="Phone"
                    clearable
                    style="width: 230px;"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="邮箱地址" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱地址"
                prefix-icon="Message"
                clearable
              />
            </el-form-item>

            <el-form-item v-if="form.role === 'enterprise'" label="企业名称" prop="organization">
              <el-input
                v-model="form.organization"
                placeholder="请输入企业名称"
                prefix-icon="OfficeBuilding"
                clearable
              />
            </el-form-item>

            <el-form-item
              v-if="form.role === 'mentor' || form.role === 'student'"
              label="所属学院"
              prop="department"
            >
              <el-select v-model="form.department" placeholder="请选择所属学院" style="width: 100%">
                <el-option label="计算机科学与技术学院" value="计算机科学与技术学院" />
                <el-option label="电子与信息工程学院" value="电子与信息工程学院" />
                <el-option label="材料科学与工程学院" value="材料科学与工程学院" />
                <el-option label="生物医学工程学院" value="生物医学工程学院" />
                <el-option label="环境科学与工程学院" value="环境科学与工程学院" />
                <el-option label="化学学院" value="化学学院" />
                <el-option label="物理学院" value="物理学院" />
                <el-option label="数学学院" value="数学学院" />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="form.role === 'mentor' || form.role === 'student'"
              label="研究方向"
              prop="researchDirection"
            >
              <el-select
                v-model="form.researchDirection"
                multiple
                placeholder="请选择研究方向"
                style="width: 100%"
                filterable
              >
                <el-option label="人工智能" value="人工智能" />
                <el-option label="机器学习" value="机器学习" />
                <el-option label="深度学习" value="深度学习" />
                <el-option label="计算机视觉" value="计算机视觉" />
                <el-option label="自然语言处理" value="自然语言处理" />
                <el-option label="新材料" value="新材料" />
                <el-option label="纳米材料" value="纳米材料" />
                <el-option label="生物材料" value="生物材料" />
                <el-option label="网络安全" value="网络安全" />
                <el-option label="信息安全" value="信息安全" />
                <el-option label="数据安全" value="数据安全" />
                <el-option label="生物医学" value="生物医学" />
                <el-option label="生物技术" value="生物技术" />
                <el-option label="环境科学" value="环境科学" />
                <el-option label="电子工程" value="电子工程" />
                <el-option label="通信工程" value="通信工程" />
              </el-select>
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="form.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="Lock"
                    show-password
                    clearable
                    style="width: 230px;"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input
                    v-model="form.confirmPassword"
                    type="password"
                    placeholder="请再次输入密码"
                    prefix-icon="Lock"
                    show-password
                    clearable
                    style="width: 230px;"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-checkbox v-model="form.agreeTerms">
                我已阅读并同意
                <el-button type="text" @click="showTerms">《用户协议》</el-button>
                和
                <el-button type="text" @click="showPrivacy">《隐私政策》</el-button>
              </el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :loading="loading"
                @click="handleSubmit"
                style="width: 100%"
              >
                立即注册
              </el-button>
            </el-form-item>
          </el-form>

          <div class="form-footer">
            <span>已有账户？</span>
            <el-button type="text" @click="goToLogin">立即登录</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 用户协议对话框 -->
    <el-dialog v-model="termsVisible" title="用户协议" width="600px">
      <div class="terms-content">
        <h3>中山大学研究生院校企对接平台用户协议</h3>
        <p>欢迎使用中山大学研究生院校企对接平台！</p>
        <p>本协议是您与中山大学研究生院之间关于使用校企对接平台服务所订立的协议。</p>
        <h4>一、服务内容</h4>
        <p>平台为企业、导师、学生提供课题发布、申请、匹配等服务。</p>
        <h4>二、用户责任</h4>
        <p>用户应提供真实、准确的信息，遵守相关法律法规。</p>
        <h4>三、知识产权</h4>
        <p>平台内容的知识产权归中山大学所有。</p>
      </div>
      <template #footer>
        <el-button @click="termsVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 隐私政策对话框 -->
    <el-dialog v-model="privacyVisible" title="隐私政策" width="600px">
      <div class="terms-content">
        <h3>中山大学研究生院校企对接平台隐私政策</h3>
        <p>我们重视您的隐私保护，本政策说明了我们如何收集、使用和保护您的个人信息。</p>
        <h4>一、信息收集</h4>
        <p>我们收集您主动提供的基本信息，如姓名、联系方式、研究方向等。</p>
        <h4>二、信息使用</h4>
        <p>收集的信息仅用于平台服务，不会向第三方泄露。</p>
        <h4>三、信息保护</h4>
        <p>我们采用安全措施保护您的个人信息安全。</p>
      </div>
      <template #footer>
        <el-button @click="privacyVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>

  <el-dialog 
    v-model="verifyDialogVisible" 
    title=""
    width="480px" 
    :close-on-click-modal="false"
    class="verify-dialog"
    :show-close="false"
  >
    <div class="verify-content">
      <!-- 图标和标题 -->
      <div class="verify-header">
        <div class="verify-icon">
          <el-icon size="48" color="#409EFF">
            <Message />
          </el-icon>
        </div>
        <h3 class="verify-title">邮箱验证</h3>
        <p class="verify-subtitle">请验证您的邮箱地址以完成注册</p>
      </div>

      <!-- 邮箱信息 -->
      <div class="email-info">
        <div class="email-card">
          <el-icon class="email-icon"><Message /></el-icon>
          <span class="email-text">{{ form.email }}</span>
        </div>
        <p class="email-tip">我们已向您的邮箱发送了验证码</p>
      </div>

      <!-- 验证码输入 -->
      <div class="code-input-section">
        <label class="code-label">请输入6位验证码</label>
        <div class="code-input-wrapper">
          <el-input
            v-model="verificationCode"
            placeholder="请输入验证码"
            maxlength="6"
            class="code-input"
            size="large"
            @keyup.enter="handleVerify"
            @input="handleCodeInput"
          >
            <template #prefix>
              <el-icon><Key /></el-icon>
            </template>
          </el-input>
        </div>
        
        <!-- 重发验证码按钮 -->
        <div class="resend-section">
          <el-button
            :disabled="countdown > 0 || !form.email"
            @click="sendVerificationCode"
            :loading="sendingCode"
            class="resend-btn"
            text
          >
            <el-icon v-if="countdown === 0"><Refresh /></el-icon>
            {{ countdown > 0 ? `${countdown}秒后重发` : '重新发送验证码' }}
          </el-button>
        </div>
      </div>

      <!-- 提示信息 -->
      <div class="verify-tips">
        <el-alert
          title="验证码有效期为5分钟，请及时输入"
          type="info"
          :closable="false"
          show-icon
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="verify-footer">
        <el-button 
          @click="verifyDialogVisible = false" 
          size="large"
          class="cancel-btn"
        >
          取消
        </el-button>
        <el-button 
          type="primary" 
          @click="handleVerify" 
          :loading="verifying"
          size="large"
          class="verify-btn"
          :disabled="!verificationCode || verificationCode.length !== 6"
        >
          <el-icon v-if="!verifying"><Check /></el-icon>
          {{ verifying ? '验证中...' : '验证' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup lang="ts">
import { sendEmailCode, verifyEmailCode } from '@/api/user'
import { ref, reactive, computed, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { School, User, OfficeBuilding, Message, Key, Refresh, Check } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
const userStore = useAuthStore()


interface FormRules {
  username: Array<RuleItem>
  role: Array<RuleItem>
  realName: Array<RuleItem>
  phone: Array<RuleItem>
  email: Array<RuleItem>
  password: Array<RuleItem>
  confirmPassword: Array<RuleItem>
  organization?: Array<RuleItem>
  department?: Array<RuleItem>
  researchDirection?: Array<RuleItem>
}

interface RuleItem {
  required?: boolean
  message?: string
  trigger?: string | string[]
  min?: number
  max?: number
  pattern?: RegExp
  type?: string
  validator?: (rule: any, value: any, callback: (error?: Error) => void) => void
}

const router = useRouter()
const loading = ref(false)
const formRef = ref()
const termsVisible = ref(false)
const privacyVisible = ref(false)

// 新增状态
const verifyDialogVisible = ref(false)
const verificationCode = ref('')
const countdown = ref(0)
const verifying = ref(false)
const sendingCode = ref(false)
const timer = ref<number | null>(null)

const form = reactive({
  username: '',
  role: '',
  realName: '',
  phone: '',
  email: '',
  organization: '',
  department: '',
  researchDirection: [] as string[],
  password: '',
  confirmPassword: '',
  agreeTerms: false,
})

const rules = computed<FormRules>(() => {
  const baseRules: FormRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
      { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' },
    ],
    role: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    email: [
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
      {
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
        message: '密码必须包含大小写字母和数字',
        trigger: 'blur',
      },
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: Function) => {
          if (value !== form.password) {
            callback(new Error('两次输入密码不一致'))
          } else {
            callback()
          }
        },
        trigger: 'blur',
      },
    ],
  }

  if (form.role === 'enterprise') {
    baseRules.organization = [{ required: true, message: '请输入企业名称', trigger: 'blur' }]
  }

  if (form.role === 'mentor' || form.role === 'student') {
    baseRules.department = [{ required: true, message: '请选择所属学院', trigger: 'change' }]
    baseRules.researchDirection = [
      { required: true, message: '请选择研究方向', trigger: 'change' },
      { type: 'array', min: 1, message: '至少选择一个研究方向', trigger: 'change' },
    ]
  }

  return baseRules
})



const handleSubmit = async () => {
  if (!formRef.value) return;

  if (!form.agreeTerms) {
    ElMessage.warning('请先同意用户协议和隐私政策');
    return;
  }

  try {
    await formRef.value.validate();

    // 验证码功能控制开关
    // 设置为 false 可以跳过验证码流程（仅用于开发测试）
    const ENABLE_EMAIL_VERIFICATION = true;
    
    if (ENABLE_EMAIL_VERIFICATION) {
      loading.value = true;
      verifyDialogVisible.value = true;
      await sendVerificationCode();
    } else {
      // 跳过验证码直接注册（仅用于开发测试）
      await completeRegistration();
    }
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    loading.value = false;
  }
}

// 处理验证码输入
const handleCodeInput = (value: string) => {
  // 只允许输入数字
  verificationCode.value = value.replace(/\D/g, '')
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!form.email) {
    ElMessage.warning('请先填写邮箱地址')
    return
  }

  sendingCode.value = true
  try {
    // 调用API发送验证码
    const response = await sendEmailCode(form.email)//若要避开验证码，注释掉本行
    if (response.data.success) {
      ElMessage.success('验证码已发送，请查收')
      
      // 开发环境下显示验证码（如果返回了）
      if (response.data.vcode && import.meta.env.MODE === 'development') {
        console.log('开发环境验证码:', response.data.vcode)
        ElMessage.info(`开发环境验证码: ${response.data.vcode}`)
      }
    } else {
      ElMessage.error(response.data.message || '验证码发送失败')
      return
    }

    // 开始倒计时
    countdown.value = 60
    timer.value = window.setInterval(() => {
      countdown.value--
      if (countdown.value <= 0 && timer.value) {
        clearInterval(timer.value)
        timer.value = null
      }
    }, 1000)
  } catch (error) {
    ElMessage.error('验证码发送失败，请稍后重试')
    console.error('发送验证码失败:', error)
  } finally {
    sendingCode.value = false
  }
}

// 验证验证码
const handleVerify = async () => {
  if (!verificationCode.value || verificationCode.value.length !== 6) {
    ElMessage.warning('请输入6位验证码');
    return;
  }

  verifying.value = true;
  try {
    // 调用API验证验证码
    const verifyResponse = await verifyEmailCode(form.email, verificationCode.value);

    if (verifyResponse.code === 200) {
      ElMessage.success('邮箱验证成功');
      await completeRegistration();
    } else {
      ElMessage.error(verifyResponse.message || '验证码错误或已过期');
    }
  } catch (error) {
    console.error('验证失败:', error);
    ElMessage.error('验证过程中发生错误');
  } finally {
    verifying.value = false;
  }
}

// 完成注册
const completeRegistration = async () => {
  try {
    loading.value = true;

    // 准备注册数据
    const registerData = {
      username: form.username,
      email: form.email,
      role: form.role === 'mentor' ? 'tutor' : form.role, // 处理角色映射
      password: form.password,
      phone: form.phone,
      real_name: form.realName,
      // 根据角色添加额外字段
      ...(form.role === 'enterprise' && { organization: form.organization }),
      ...((form.role === 'mentor' || form.role === 'student') && {
        department: form.department,
        research_direction: form.researchDirection // 已经是数组，不需要join
      })
    };

    // 调用注册API
    const result = await userStore.register(registerData);

    if (result.success) {
      ElMessage.success('注册成功！请登录');
      verifyDialogVisible.value = false;
      router.push('/login');
    } else {
      ElMessage.error(result.message || '注册失败，请稍后重试');
    }
  } catch (error) {
    console.error('注册失败:', error);
    ElMessage.error('注册过程中发生错误');
  } finally {
    loading.value = false;
  }
}

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

const goToLogin = () => {
  router.push('/login')
}

const showTerms = () => {
  termsVisible.value = true
}

const showPrivacy = () => {
  privacyVisible.value = true
}
</script>

<style scoped>
/* 优化布局 */
.el-form-item {
  margin-bottom: 18px;
}

.el-input, .el-select {
  width: 100%;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper:hover) {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

:deep(.el-input__inner) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  font-size: 14px;
}

:deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

/* 选择框样式 */
:deep(.el-select .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
}

:deep(.el-select .el-input__wrapper.is-focus) {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

/* 复选框样式 */
:deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #4caf50;
  border-color: #4caf50;
}

:deep(.el-checkbox__inner) {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 按钮样式 */
:deep(.el-button--text) {
  color: #4caf50;
  font-weight: 500;
}

:deep(.el-button--text:hover) {
  color: #66bb6a;
}

@media (max-width: 768px) {
  .register-content {
    padding: 0 15px;
  }

  .register-card {
    padding: 15px;
  }

  .el-form-item {
    margin-bottom: 15px;
  }
}
/* 验证码对话框样式 */
.verify-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.verify-dialog :deep(.el-dialog__header) {
  display: none;
}

.verify-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.verify-dialog :deep(.el-dialog__footer) {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.verify-content {
  padding: 32px 24px 0;
  text-align: center;
}

/* 头部区域 */
.verify-header {
  margin-bottom: 32px;
}

.verify-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.verify-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.verify-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 邮箱信息区域 */
.email-info {
  margin-bottom: 32px;
}

.email-card {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.email-icon {
  color: #3b82f6;
  margin-right: 8px;
  font-size: 16px;
}

.email-text {
  font-weight: 500;
  color: #1f2937;
  font-size: 14px;
}

.email-tip {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* 验证码输入区域 */
.code-input-section {
  margin-bottom: 24px;
}

.code-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 12px;
}

.code-input-wrapper {
  margin-bottom: 16px;
}

.code-input {
  width: 100%;
}

.code-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.code-input :deep(.el-input__wrapper:hover) {
  border-color: #3b82f6;
}

.code-input :deep(.el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.code-input :deep(.el-input__prefix) {
  color: #6b7280;
}

.code-input :deep(.el-input__inner) {
  color: #1f2937 !important;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 2px;
}

.code-input :deep(.el-input__inner::placeholder) {
  color: #9ca3af !important;
}

/* 重发按钮 */
.resend-section {
  text-align: center;
}

.resend-btn {
  color: #3b82f6;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.resend-btn:hover:not(:disabled) {
  background: #eff6ff;
  color: #1d4ed8;
}

.resend-btn:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* 提示信息 */
.verify-tips {
  margin-bottom: 24px;
}

.verify-tips :deep(.el-alert) {
  border-radius: 8px;
  border: none;
  background: #f0f9ff;
}

.verify-tips :deep(.el-alert__content) {
  font-size: 13px;
}

/* 底部按钮 */
.verify-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cancel-btn {
  min-width: 100px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  color: #6b7280;
  background: white;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  border-color: #9ca3af;
  color: #374151;
  background: #f9fafb;
}

.verify-btn {
  min-width: 120px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.verify-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.verify-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
  transform: none;
}
.register-container {
  min-height: 100vh;
  background-image: 
  url("@/assets/banner1-Vjwxq.jpg");  
  

  background-size: cover;  
  background-position: center;  
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}

/* 渐变遮罩层 */
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(46, 125, 50, 0.2) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
   z-index: 2; 
}

.register-background {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.register-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 60px;
  animation: fadeInUp 0.8s ease-out;
  z-index: 3;
}

.register-header {
  flex: 1;
  text-align: center;
  color: var(--primary-color);
}

.logo-section h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 20px 0 10px;
  color: rgba(255, 255, 255, 1);
}

.logo-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

.register-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 3;
}

.register-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  margin: 0 0 8px;
}

.card-header p {
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

.role-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.role-option span {
  font-weight: 500;
}

.form-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.form-footer span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 14px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-select {
  border-radius: 8px;
}

.el-input:focus,
.el-select:focus {
  border-color: var(--primary-color);
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
}

.el-button--primary {
  height: 48px;
  font-size: 16px;
}

.terms-content {
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.6;
}

.terms-content h3 {
  color: var(--primary-color);
  margin-bottom: 16px;
}

.terms-content h4 {
  color: var(--text-primary);
  margin: 16px 0 8px;
}

.terms-content p {
  margin: 8px 0;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .register-content {
    flex-direction: column;
    gap: 30px;
  }

  .register-header {
    order: 2;
  }

  .register-card {
    order: 1;
    max-width: 100%;
  }
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


</style>
